<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Document</title>
  <style>
    #canvas {
      border: 1px solid;
    }
  </style>
</head>

<body>
  <img src="./icon.png" alt="" id="icon">
  <canvas width="400" height="400" id="canvas"> 请升级你的服务器 </canvas>
  <script>
    var canvasBox = document.querySelector("#canvas");
    var context = canvasBox.getContext("2d");
    // context.strokeStyle = "#f00";
    // context.strokeRect(50, 50, 100, 100);
    // context.fillStyle = "#f00";
    // context.globalAlpha=0.1; // 透明度
    // context.fillRect(200, 200, 100, 100);
    var image = new Image()
    image.src = './icon.png'
    image.onload = function () {
      var pat = context.createPattern(document.getElementById('icon'), 'repeat');
      // context.rect(x, y, width, height);
      context.fillStyle = pat;
      context.rect(0, 0, 400, 400);
      context.fill();
    }
    console.log(context.createImageData(40, 40));
    
    // }
  </script>
</body>

</html>